// Core
$core_width: 50px;
$core_color: #de0b46;
$core_glow: 0px 0px 70px 20px #de0b46;

// Outer 1
$outer_one_offset: 120px;
$outer_one_width: 10px;
$outer_one_height: 30px;
$outer_one_color: #de0b46;
$outer_one_glow: 0px 0px 20px 0px #de0b46;

// Outer 2
$outer_two_offset: 290px;
$outer_two_width: 28px;
$outer_two_height: 5px;
$outer_two_color: #de0b46;
$outer_two_glow: 0px 0px 20px 0px #de0b46;

// Outer 3
$outer_three_offset: 440px;
$outer_three_width: 55px;
$outer_three_height: 5px;
$outer_three_color: #55e2f9;
$outer_three_glow: 0px 0px 20px 0px #55e2f9;

// Outer 4
$outer_four_offset: 440px;
$outer_four_width: 6px;
$outer_four_height: 5px;
$outer_four_color: #de0b46;
$outer_four_glow: 0px 0px 20px 0px #de0b46;

// Outer 5
$outer_five_offset: 410px;

// Menu items
$menu_offset: 540px;
$menu_height: 20px;
$menu_color: transparent;
$menu_glow: 0px 0px 25px rgba(222, 11, 70, 0.27);

/* Placeholders */

%center {
  left: 0;
  right: 0;
  top: 50%;
  position: absolute;
  margin: auto;
  transform: translateY(-50%);
}

%decal {
  position: absolute;
  width: $core_width;
  height: $core_width;
  left: 50%;
}

%fade_loop {
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      animation: fade 5s ($i/10 + 0s) infinite;
    }
  }
}

%fade_loop_alt {
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      animation: fade 7s ($i/10 + 0s) infinite;
    }
  }
}

%circ_loop {
  position: absolute;
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      border-radius: 2px;
      transform: rotateZ($i * 10 + (0deg));
    }
  }
}

%circ_loop_quart {
  position: absolute;
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      border-radius: 2px;
      transform: rotateZ($i * 4 + (0deg));
    }
  }
}

%circ_loop_quart_alt {
  position: absolute;
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      border-radius: 2px;
      transform: rotateZ($i * 4 + (0deg) - 180);
    }
  }
}

body {
  height: 100vh;
  animation: intro_box forwards;
  opacity: 0;
  perspective-origin: 50% -10%;
  margin: 0;
  padding: 0;
  font-family: montserrat;
  perspective: 800;
  background: radial-gradient(
      ellipse at top left,
      rgba(222, 11, 70, 0.26) -160%,
      rgba(255, 255, 255, 0) 103%
    ),
    -webkit-radial-gradient(center, ellipse cover, #0c1019 0%, #0b0b0e 100%);
  overflow: hidden;
  .grain {
    transform: scale(1) !important;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/overlay.png");
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    pointer-events: none;
    top: 0;
    opacity: 1;
    bottom: 0;
  }
  .center {
    @extend %center;
    transform: translateY(-21px) translateZ(-870px) rotateX(69deg)
      rotateY(-26deg) rotatez(-647deg) scale(0.9);
    height: $core_width;
    width: $core_width;
    animation: wiggle 20s infinite linear;
    .core {
      width: $core_width;
      height: $core_width;
      border-radius: $core_width;
      background: $core_color;
      box-shadow: $core_glow;
    }
    .outer_one {
      @extend %decal;
      transform: translateX(-$outer_one_offset) translateY(-50%);
      &__piece {
        width: $outer_one_width;
        height: $outer_one_height;
        background: $outer_one_color;
        box-shadow: $outer_one_glow;
        transform-origin: $outer_one_offset 0px;
        @extend %circ_loop;
      }
    }
    .outer_two {
      @extend %decal;
      transform: translateX(-$outer_two_offset) translateY(-50%);
      &__piece {
        width: $outer_two_width;
        height: $outer_two_height;
        background: $outer_two_color;
        box-shadow: $outer_two_glow;
        transform-origin: $outer_two_offset 0px;
        @extend %circ_loop;
        @extend %fade_loop;
      }
    }
    .outer_three {
      @extend %decal;
      transform: translateX(-$outer_three_offset) translateY(-50%);
      &__piece {
        width: $outer_three_width;
        height: $outer_three_height;
        background: $outer_three_color;
        box-shadow: $outer_three_glow;
        transform-origin: $outer_three_offset 0px;
        @extend %circ_loop_quart;
        @extend %fade_loop;
      }
    }
    .outer_four {
      @extend %decal;
      transform: translateX(-$outer_four_offset) translateY(-50%);
      &__piece {
        width: $outer_four_width;
        height: $outer_four_height;
        background: $outer_four_color;
        box-shadow: $outer_four_glow;
        transform-origin: $outer_four_offset 0px;
        @extend %circ_loop_quart_alt;
        @extend %fade_loop_alt;
      }
    }
    .outer_five {
      @extend %decal;
      transform: translateX(-$outer_five_offset) translateY(-50%);
      &__piece {
        width: $outer_four_width;
        height: $outer_four_height;
        background: $outer_four_color;
        box-shadow: $outer_four_glow;
        transform-origin: $outer_five_offset 0px;
        @extend %circ_loop_quart_alt;
        @extend %fade_loop_alt;
      }
    }
    .pieces {
      @extend %decal;
      transform: translateX($menu_offset) translateY(-50%);
      .tip {
        font-size: 17px;
        position: absolute;
        left: 105%;
        opacity: 0;
        transition: all 0.2s 0.3s;
        font-weight: 400;
        color: #85dfe4;
        width: 100%;
        top: 70px;
      }
      span {
        position: absolute;
        top: 19px;
        width: 270px;
        left: 34px;
        transform: translateZ(-770px) rotateZ(0deg);
        transition: all 0.2s 0.1s;
      }
      .line {
        width: 0px;
        height: 5px;
        left: -547px;
        transform: rotatez(4deg);
        top: 17px;
        background: #de0b46;
        position: absolute;
        opacity: 0;
      }
      .future_ui__piece {
        border: 3px solid #de0b46;
        position: absolute;
        font-weight: 900;
        padding: 30px;
        font-size: 30px;
        box-shadow: 0px 0px 25px rgba(222, 11, 70, 0.27);
        transform-style: preserve-3d;
        transition: all 1s 0.1s;
        color: white;
        text-align: left;
        @for $i from 1 through 36 {
          &:nth-of-type(#{$i}) {
            transform: rotateZ($i * 10 + (0deg) - 55) rotateY(0deg);
            width: 220 + random(73) + px;
            &:hover {
              cursor: pointer;
              color: white;
              animation: blink 0.4s 0.4s;
              background: #de0b46;
              transform: rotate($i * 10 + (0deg) - 55) translatex(20px);
              box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
              span {
                position: absolute;
                top: 12px;
                width: 270px;
                text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
                left: 240px;
                transform: translateZ(100px) rotateZ(0deg);
              }
              .tip {
                opacity: 1;
                left: 110%;
              }
              .line {
                opacity: 1;
                width: 547px;
                transition: all 0.4s 0.2s;
              }
            }
          }
        }
        height: $menu_height;
        background: $menu_color;
        color: white;
        border-radius: 100px !important;
        box-shadow: $menu_glow;
        transform-origin: -$menu_offset 0px;
        @extend %circ_loop;
      }
      .blank {
        opacity: 0.1;
        background: none;
        pointer-events: none;
        box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.27);
        border: 6px solid #3d4b6d !important;
      }
    }
  }
}

/* animations */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes inalt {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes wiggle {
  0% {
    transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg)
      rotatez(80deg) scale(0.9);
  }
  25% {
    transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg)
      rotatez(84deg) scale(0.9);
  }
  50% {
    transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg)
      rotatez(82deg) scale(0.9);
  }
  75% {
    transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg)
      rotatez(78deg) scale(0.9);
  }
  100% {
    transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg)
      rotatez(80deg) scale(0.9);
  }
}

@keyframes intro_box {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.89);
  }
  60% {
    transform: scale(1.04);
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
  }